/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
 <div class="navBar">
    <div class="box">
      <div class="left">
        <!-- 插槽是父组件与子组件的通讯方式，子组件中的slot可以显示父组件传递给子组件的内容 -->
        <slot name="left"></slot>
      </div>
      <div class="middle">{{title}}</div>
      <div class="right">
        <slot name="right"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {};
  },
  methods: {
    goBack() {
      // 分发自定义事件(事件名: goBack)
      this.$emit("goBack");
    }
  },
  components: {}
};
</script>

<style lang='less' scoped>
@import '../../util/themt.less';

.navBar {
  // border-bottom: 1px solid @border-base;
  // background: #fff;
  color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 46px;
  padding-top: 0px;
  line-height: 46px;
  .types-bg();
  .box {
    flex-direction: row;
    height: 46px;
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    overflow: hidden;
    .left {
      flex: 0 0 60px;
      justify-content: center;
      align-items: center;
      width: 100%;
      display: flex;
      a{
        color: #fff;
      }
    }
    .middle {
      // display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      font-weight: 500;
      text-align: center;
    }
    .right {
      flex: 0 0 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
    }
  }
}
</style>
